<template>
  <Layout>
    <div class="large-screen-home">
      <a-row :gutter="24" style="height: 100%">
        <a-col :span="16" style="height: 100%">
          <div class="large-screen-home-left">
            <span class="left-title">实验设备</span>
            <a-row :gutter="[12, 8]" class="left-main">
              <a-col :span="8" v-for="item in 30" :key="item" class="left-col">
                <div class="left-item">
                  <span class="left-item-title">M{{ item }}</span>
                  <span class="left-item-content">
                    <div style="flex: 2">
                      <div class="left-item-info">
                        <span class="left-item-label">运行状态</span>
                        <span class="left-item-value">运行中</span>
                      </div>
                      <div class="left-item-info">
                        <span class="left-item-label">运行工时</span>
                        <span class="left-item-value">11111</span>
                      </div>
                      <div class="left-item-info">
                        <span class="left-item-label">今日加工</span>
                        <span class="left-item-value">100</span>
                      </div>
                    </div>
                    <div style="flex: 1">
                      <Pie :data="{ id: item }" />
                    </div>
                  </span>
                </div>
              </a-col>
            </a-row>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="large-screen-home-right">
            <span class="right-title">2222</span>
          </div>
        </a-col>
      </a-row>
    </div>
  </Layout>
</template>

<script setup>
import { ref, onMounted } from "vue";
import Layout from "../layout.vue";
import Pie from "./pie.vue";

onMounted(() => {});
</script>

<style lang="scss" scoped>
#pie {
  width: 100%;
  height: 120px;
}

.large-screen-home {
  position: relative;
  height: 100%;
  color: #fff;

  .large-screen-home-row,
  .large-screen-home-col,
  .large-screen-home-left,
  .large-screen-home-right {
    height: 100%;
  }
  /** 左侧 */
  .large-screen-home-left {
    overflow: hidden;
    background: url("@/assets/images/large-screen/home/bg1.png") no-repeat;
    background-size: contain;
    padding: 20px 30px 20px 20px;
    /** 标题 */
    .left-title {
      display: block;
      font-size: 24px;
      font-weight: bold;
      margin: -6px 0 0 50px;
    }

    /** 主体 */
    .left-main {
      overflow: hidden auto;
      height: calc(100% - 70px);
      padding: 0 10px 0 0;
      margin: 30px 20px 0 0;

      /* 设置滚动条样式 */
      &::-webkit-scrollbar {
        width: 8px; /* 滚动条的宽度 */
        height: 8px; /* 水平滚动条的高度 */
      }
      &::-webkit-scrollbar-thumb {
        background-color: #2765c9; /* 滚动条的颜色 */
        // border-radius: 4px; /* 滚动条的圆角 */
      }
      &::-webkit-scrollbar-thumb:hover {
        background-color: #1f4e94; /* 悬停时滚动条的颜色 */
      }
      &::-webkit-scrollbar-track {
        background-color: transparent; /* 滚动条轨道的颜色 */
        // border-radius: 4px; /* 轨道的圆角 */
      }
      /** n个内容 */
      .left-col {
        height: 200px;
        .left-item {
          overflow: hidden;
          height: 100%;
          width: 100%;
          background: url("@/assets/images/large-screen/home/bg2.png") no-repeat;
          background-size: contain;
          .left-item-title {
            display: block;
            height: 40px;
            line-height: 50px;
            margin-left: 20px;
          }
          .left-item-content {
            display: flex;
            padding: 20px;
            .left-item-info {
              display: flex;
              align-items: center;
              margin-top: 16px;
              // &:nth-child(n + 2) {
              // 	margin-top: 18px;
              // }

              .left-item-label {
                display: block;
                font-size: 16px;
                color: #ccc;
              }
              .left-item-value {
                display: block;
                font-size: 16px;
                margin-left: 16px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
